<template>
  <div id="map-container" class="h-[80%]">

  </div>
  <el-button @click="setCenter">设置中心</el-button>
  <el-button @click="createMarker">设置点标记</el-button>
</template>

<script setup>
import {useScriptTag} from '@vueuse/core'
import {onMounted, onUnmounted} from 'vue'

const mapSrc = 'https://map.qq.com/api/gljs?v=1.exp&key=JODBZ-IYSWW-RVNRJ-36IYE-VMU3S-PFFC5'

let map = null
useScriptTag(mapSrc, () => {
  initMap()
})
onUnmounted(() => {
  map.destroy()
})


function initMap() {
  //定义地图中心点坐标
  const center = new TMap.LatLng(39.984120, 116.307484)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  map = new TMap.Map(document.getElementById('map-container'), {
    center: center,//设置地图中心点坐标
    zoom: 17.2,   //设置地图缩放级别
    pitch: 43.5,  //设置俯仰角
    rotation: 45    //设置地图旋转角度
  });
}

function setCenter() {
  // 重庆
  map.setCenter(new TMap.LatLng(29.562, 106.54))
  // map.setCenter(new TMap.LatLng(39.984120, 116.307484))
}

let marker = null

function createMarker() {
  if (!marker) {
    marker = new TMap.MultiMarker({
      id: 'marker-layer',
      map: map,
      styles: {
        "marker": new TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": {x: 16, y: 32},
          "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
        })
      },
      geometries: [{
        "id": 'demo',
        "styleId": 'marker',
        "position": new TMap.LatLng(39.984104, 116.307503),
        "properties": {
          "title": "marker"
        }
      }]
    });
  }
}
</script>


<style scoped lang="scss">

</style>